<div id="subContainer" class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <form class="form-horizontal m-t" id="signupForm">
                <div class="form-group">
                    <label class="col-sm-3 control-label">用户姓名<span class="text-danger">*</span>：</label>
                    <div class="col-sm-8">
                        <input id="username" name="username" class="form-control" type="text" v-model="user.username">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">登录密码<span class="text-danger">*</span>：</label>
                    <div class="col-sm-8">
                        <input id="password" name="password" class="form-control" type="password"
                               v-model="user.password"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">用户昵称<span class="text-danger">*</span>：</label>
                    <div class="col-sm-8">
                        <input id="nickname" name="nickname" class="form-control" type="text"
                               v-model="user.nickname"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">身份证号<span class="text-danger">*</span>：</label>
                    <div class="col-sm-8">
                        <input id="idNum" name="idNum" class="form-control" type="text"
                               v-model="user.idNum"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">登录邮箱<span class="text-danger">*</span>：</label>
                    <div class="col-sm-8">
                        <input id="email" name="email" class="form-control" type="text" v-model="user.email"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">手机号码<span class="text-danger">*</span>：</label>
                    <div class="col-sm-8">
                        <input id="mobile" name="mobile" class="form-control" type="text" v-model="user.mobile"></input>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">所属公司<span class="text-danger">*</span>：</label>
                    <div class="col-sm-8">
                        <select id="company" name="company" class="form-control" type="text" v-model="user.companyId">
                            <option v-for="item in companies" :value="item.id">{{item.name}}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">所属部门<span class="text-danger">*</span>：</label>
                    <div class="col-sm-8">
                        <input id="orgName" name="orgName" class="form-control" type="text"
                               v-model="user.orgName"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-8">
                        <input id="remark" name="remark" class="form-control" type="text" v-model="user.remark"></input>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8 col-sm-offset-3">
                        <button type="button" class="btn btn-secondary" v-on:click="cancel()">取消</button>
                        <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/js/validateIsMain.js"></script>
<script>
    new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/',
            user: {
                username: '',
                password: '',
                nickname: '',
                email: '',
                mobile: '',
                orgName: '',
                remark: '',
                idNum: '',
                companyId: ''
            },
            companies: []
        },
        created: function () {
            this.loadCompanies();
        },
        methods: {
            cancel: function () {
                this.backToMain();
            },
            save: function () {
                if (!$("#signupForm").valid()) {
                    return false;
                }
                var that = this;
                AJAX.POST_JSON('/api/system/sysUser', this.user, function (resp) {
                    toastr.success(resp.msg);
                    that.backToMain();
                });
            },
            backToMain: function () {
                $.pjax({
                    url: mvm.applicationContextRootPath + 'pages/user/index.html',
                    container: '.page-container'
                });
            }
        }
    });

    $().ready(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 2,
                    maxlength: 24
                },
                password: {
                    required: true,
                    minlength: 6,
                    maxlength: 24
                },
                nickname: {
                    required: true,
                    minlength: 2,
                    maxlength: 24
                },
                email: {
                    required: true,
                    email: true
                },
                mobile: {
                    required: true,
                    isMobile: true
                },
                orgName: "required"
            },
            messages: {
                username: {
                    required: icon + "请输入用户名",
                    minlength: jQuery.validator.format("用户名至少需填写{0}个字符"),
                    maxlength: jQuery.validator.format("用户名最多填写{0}个字符")
                },
                password: {
                    required: icon + "请输入您的密码",
                    minlength: jQuery.validator.format("用户名至少需填写{0}个字符"),
                    maxlength: jQuery.validator.format("用户名最多填写{0}个字符")
                },
                nickname: {
                    required: icon + "请输入昵称",
                    minlength: jQuery.validator.format("用户名至少需填写{0}个字符"),
                    maxlength: jQuery.validator.format("用户名最多填写{0}个字符")
                },
                email: {
                    required: icon + "请输入邮箱",
                    email: "无效的邮箱"
                },
                mobile: {
                    required: icon + "请输入手机号码",
                    isMobile: "无效的手机号码"
                },
                orgName: icon + "请输入部门名称"
            }
        });

        // propose username by combining first- and lastname
        $("#username").focus(function () {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = firstname + "." + lastname;
            }
        });
    });
</script>
